<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <link rel="icon" href="./yw_logo.png" type="image/png">
    <style>
        #fixed_full {
            position: fixed;
            bottom: 20px;
            right: 10px;
            z-index: 999;
        }
    </style>
</head>

<body>
    <table border="2">
        <tr>
<!--            <td><input name="打开本地文件" value="打开本地文件" type="file" onchange="OpenLocalFile(this)"></td>-->
<!--            <td><button name="打开网络文件" onclick="OpenNewFile()">网络文件</button></td>-->
            <td>
                <select name="视图" onchange="P3D_ChangeView(this.options.selectedIndex)">
                    <option value="前视图">前视图</option>
                    <option value="后视图">后视图</option>
                    <option value="左视图">左视图</option>
                    <option value="右视图">右视图</option>
                    <option value="俯视图">俯视图</option>
                    <option value="仰视图">仰视图</option>
                    <option value="等轴侧">等轴侧</option>
                </select>
            </td>
            <td>
                <input type="checkbox" style="font-size:15px;" id="lockup" name="锁定上方向" onclick="LockUpAxis()" checked>锁定上方向</input>
            </td>
            <td>
                <select name="投影" onchange="P3D_CameraSetProjectType(this.options.selectedIndex)">
                    <option value="透视投影">透视投影</option>
                    <option value="正交投影">正交投影</option>
                </select>
            </td>
            <td>
                <select name="操作模式" onchange="P3D_CameraControlMode(this.options.selectedIndex)">
                    <option value="旋转模式">旋转模式</option>
                    <option value="自旋模式">自旋模式</option>
                    <option value="平移模式">平移模式</option>
                    <option value="步览模式">步览模式</option>
                    <option value="飞行模式">飞行模式</option>
                    <option value="环顾模式">环顾模式</option>
                </select>
            </td>

            <td>
                <select name="爆炸模式" onchange="SetExplodeMode(this.options.selectedIndex)">
                    <option value="终止爆炸">终止爆炸</option>
                    <option value="自由爆炸">自由爆炸</option>
                    <option value="X轴爆炸">X轴爆炸</option>
                    <option value="Y轴爆炸">Y轴爆炸</option>
                    <option value="Z轴爆炸">Z轴爆炸</option>
                </select>
            </td>
            <td>
                <input type="range" id="expRange" name="爆炸范围" min="0" max="100" setp="1" value="0" oninput="SetExplodeRange()"></input>
            </td>
            <td>
              <button name="刷新" onclick="Refresh()">刷新</button>
            </td>
        </tr>
    </table>

    <button id="fixed_full" onclick="toogleFullScreen()">全屏/退出全屏</button>

    <script type="text/javascript" src="./P3DToolkitDef.js"></script>
    <script type="text/javascript" src="./P3DToolkit.js"></script>

<script type="text/javascript" language="javascript">
    document.addEventListener('wheel', function() { }, { passive: false });

    // 在页面加载时调用函数获取传参
    window.onload = openP3D;

    var mic = null;
    var sceneName = null;
    // 用来记录完成的在线访问地址
    var urlPrefix = null;
    function openP3D() {
        var p3durl = decodeURI(window.location.href.split("?")[1]);

        g_p3dhttp = new XMLHttpRequest();
        console.log(p3durl, 'p3d路径');
        g_p3dhttp.open("GET", p3durl, true);
        g_p3dhttp.responseType = "arraybuffer";
        g_p3dhttp.overrideMimeType("text/plain; charset=x-user-defined");

        // 下载成功打开文件
        g_p3dhttp.onreadystatechange = function (e) {
            console.log(g_p3dhttp);
            console.log(g_p3dhttp.readyState, 'g_p3dhttp.readyState');
            console.log(g_p3dhttp.status, 'g_p3dhttp.status');
            if (g_p3dhttp.readyState == 4 && g_p3dhttp.status == 200) { // 4 = "loaded" // 200 = OK
                // 加载文件
                p3dtoolkitlib.P3D_InitData(g_p3dhttp.response, "vkMSaXn/ofFksDhbqoBzlHZwo/5p4/laAnsOm6p/J/uWMsmrFted2SVOPG5avuCBGXuSI+mdsapz+DLHMx6ZwJ1QU/FZ8/eKY7kC5sJIs8uir8wCIKa9cw==");
            } else {
                console.log("通过网络地址获取文件失败,地址为:" + p3durl + "请核对地址是否准确");
            }
        }
        g_p3dhttp.send();
    }

    function Refresh(){
      location.reload();
    }

    // 动态加载 P3DToolkit 依赖库，解决不同 vue 版本兼容的问题
    loadP3DToolkitLib(function(isErr, errJSFileUrl) {
        // 错误处理
        if (isErr) {
            console.error('加载模型库依赖失败！');
            console.error('失败的 JS 文件地址：', errJSFileUrl);
            return;
        }
        // 初始化 P3DToolkit
        initP3DToolkit()
    })

    // 获取当前时间戳（毫秒）
    var startTimestamp = null;

    // 初始化 P3DToolkit
    var container, p3dtoolkitlib;
    function initP3DToolkit() {
        container = document.createElement('div');
        container.style.position = 'absolute';
        container.style.width = '100%';
        container.style.height = '100%';
        document.body.appendChild(container);

        var p3dcallbacks = new P3D_CALLBACKS();
        p3dcallbacks.P3D_OnLoadModelEndCallback = function () {
            var endTimestamp = Date.now();
            // 获取两个日期的毫秒数差值
            var diffInTime = Math.abs(endTimestamp - startTimestamp);
            // 设置默认视图
            var defaultViewID = p3dtoolkitlib.P3D_GetDefaultViewID();
            console.log("默认视图ID：", defaultViewID)
            if (defaultViewID != -1) {
                p3dtoolkitlib.P3D_ChangeViewByID(defaultViewID);
            }
            console.log("模型加载完毕！");
            console.log(diffInTime);
        }

        p3dcallbacks.P3D_OnMouseUpCallBack = function(event) {

        }

        var p3dsettings = new P3D_SETTINGS();
        // 设置默认背景色
        // p3dsettings.bgType = 2;
        // p3dsettings.defaultBgColor._red = 255;

        // 设置默认背景图
        // p3dsettings.bgType = 1;
        // p3dsettings.defaultBgImage = "white.jpg";
        // p3dsettings.defaultBgUrl = "./Resource/Background/test.jpeg";
        p3dtoolkitlib = new P3DToolkitLib(container, p3dcallbacks, p3dsettings);
    }

    // 打开本地文件
    function OpenLocalFile(e) {
        // 按字节读取文件内容，结果用ArrayBuffer对象表示
        var p3dreader = new FileReader();
        p3dreader.readAsArrayBuffer(e.files[0]);

        p3dreader.onload = function () {
            // 加载文件
            startTimestamp = Date.now();
            p3dtoolkitlib.P3D_ConfigureLoader(1, 1, 1);
            p3dtoolkitlib.P3D_InitData(this.result, "vkISaXn/oYNksDg2c4FzlHZwo+RB7otJiIrRlmZCceSWbRj4XqWd2SUrWprSQI7sJIhdP+fy0B1DvjDBKBSewMcfSqRY+e7FbrwEr9lP48rz58FTJfjpLg3/i4FlHA==");
        }
    }

    // 打开网络文件
    let g_p3dhttp = null;
    function OpenNewFile() {

        var ojbIDS = P3D_GetSelObjIDs();
        P3D_FlickerObjs(ojbIDS, 3, 1000);
    }

    var expMode = -1;
    function SetExplodeMode(index) {
        switch(index) {
            case 0:
                expMode = -1;
                break;
            case 1:
                expMode = P3D_EXPLODE_MODE_FREE;
                break;
            case 2:
                expMode = P3D_EXPLODE_MODE_X;
                break;
            case 3:
                expMode = P3D_EXPLODE_MODE_Y;
                break;
            case 4:
                expMode = P3D_EXPLODE_MODE_Z;
                break;
            default :
                expMode = P3D_EXPLODE_MODE_FREE;
                break;
        }

        var range = document.getElementById('expRange');
        range.value = 0;
        if (expMode < 0) {
            console.log("退出爆炸");
            P3D_ExplodeFinish();
        } else {
            console.log("开始爆炸");
            P3D_ExplodeStart(null, expMode, 4, 100);
        }
    }

    function SetExplodeRange() {
        var value = document.getElementById('expRange').value;
        P3D_ExplodeUpdate(value);
    }

    function fullScreen() {
        var element = document.documentElement;
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        }

        // 初始化位置
        container.style.top = 0;
        container.style.left = 0;
    }

    //退出全屏
    function exitFullscreen() {

        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
        // 初始化位置
        container.style.top = 'auto';
        container.style.left = 'auto';
    }

    let isFullScreen = false
    function toogleFullScreen() {
        isFullScreen ? exitFullscreen() : fullScreen()
        isFullScreen = !isFullScreen

    }

    function LockUpAxis()
    {
        let lockup = document.getElementById('lockup');
        P3D_CameraLockUpAxis(lockup.checked);
    }
</script>
</body>
</html>
